<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view class="padding-bottom-xl">
		<view class="sticky-tabs bg head">
			<me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs>
		</view>
		<view v-if="goods.length > 0" class="margin-lr-sm margin-top-16 padding-sm bg radius"
			v-for="(item,index) in goods" :key='index' style="position: relative;overflow: hidden;"
			@click="goNav('/shopping/shoppOrder/orderDetail?submitOrderForm=' + encodeURIComponent(JSON
						.stringify(item)))">
			<view class="flex justify-between text-26">
				<view class="text-blue">{{item.spuName}}</view>
				<view style="color: #999999;">{{item.updateTime}}</view>
			</view>


			<view class="padding-lr-lg padding-tb-xs bg-gradual-blue order_status" v-if="item.status == 0">
				待付款
			</view>
			<view class="padding-lr-lg padding-tb-xs bg-gradual-blue order_status" v-if="item.status == 1">
				待发货
			</view>
			<view class="padding-lr-lg padding-tb-xs bg-gradual-blue order_status" v-if="item.status == 2">
				已发货
			</view>
			<view class="padding-lr-lg padding-tb-xs bg-gradual-blue order_status" v-if="item.status == 3">
				已完成
			</view>
			<view class="padding-lr-lg padding-tb-xs bg-gradual-blue order_status" v-if="item.status == 4">
				已取消
			</view>
			<view class="padding-lr-lg padding-tb-xs bg-gradual-blue order_status" v-if="item.status == 5">
				无效订单
			</view>


			<view class="flex u-p-t-30">
				<view class="u-m-r-10">
					<u-avatar :src="item.skuPic?item.skuPic: '../../static/logo.png'" mode="square" size="100">
					</u-avatar>
				</view>
				<view class="u-flex-1 text-white margin-left-xs">
					<view class="text-30  text-bold u-line-1" style="width: 560rpx;">
						{{item.skuName}}
					</view>
				</view>
			</view>
			<view class="flex u-p-t-20 justify-between align-center ">
				<view class="text-white flex-sub ">
					实付：<text class="text-df">￥</text><text class="text-xl text-bold">{{item.realAmount}}</text>
				</view>
				<view class="flex text-right">
					<!-- <view class="btn" v-if="item.status == 1" @click.stop="look(item)">查看确认码</view> -->
					<view v-if="item.status == 1 || item.status == 0 " @click.stop="cancelOrder(item)" class="btn">
						取消订单
					</view>
					<view v-if="item.status == 0" @click.stop="goPayment(item)" class="btn">去支付</view>
					<!-- <view v-if="item.status == 1" @click.stop="cancel(item)" class="btn">订单完成</view> -->
					<view v-if="item.status == 2" @click.stop="getOrder(item.ordersId)" class="btn">去投诉</view>
					<view v-if="item.status == 2 && item.commentCount == 0"
						@click.stop="goNav('/my/order/feedback?id='+item.orderTakingId+ '&ordersNo='+item.ordersNo)"
						class="btn">去评价</view>
					<view v-if="item.status == 3" @click.stop="delOrder(item)" class="btn">删除订单</view>

				</view>
			</view>
		</view>
		<empty v-if="goods.length == 0" content="暂无数据"></empty>

		<view class="boxtk" v-if="reverTrue">
			<view class="whitebox padding">
				<view class="flex justify-between align-center">
					<view style="font-size:38upx;color:#333333" class="text-bold">确认码</view>
					<view @click="bindclose()">
						<image src="/static/images/msg/close.png" style="width:35upx;height:35upx;"></image>
					</view>
				</view>

				<view class="margin-top-xl text-center" style="font-size: 88upx;">
					{{code}}
				</view>

			</view>
		</view>


		<view class="box" v-if="showPay">
			<view class="bottbox">
				<view class="flex align-start justify-between">
					<view
						style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;margin-top:15rpx;margin-bottom: 80rpx;">
						选择支付方式
					</view>
					<view class="margin-right margin-top-sm" @click="bindclost">
						<image src="../../static/images/msg/close.png" style="width: 30upx;height: 30upx;">
						</image>
					</view>
				</view>
				<view style="display: flex;" v-for="(item,index) in openLists" :key='index'>
					<view style="width: 100%;display: flex;height: 100upx;align-items: center;padding: 20upx 30rpx;"
						v-if="item.text === '零钱' && czSel != '否'">
						<view style="display: flex;width:80%;align-items: center;">
							<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;"></image>
							<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">{{item.text}}
							</view>
						</view>
						<view style="width: 20%;display: flex;justify-content: flex-end;">
							<radio-group name="openWay" style="margin-left: 20upx;" @tap='selectWay(item.id)'>
								<label class="tui-radio">
									<radio color="#1789FD" :checked="openWay === item.id ? true : false" />
								</label>
							</radio-group>
						</view>
					</view>
					<view style="width: 100%;display: flex;height: 100upx;align-items: center;padding: 20upx 30rpx;"
						v-if="item.text != '零钱'">
						<view style="display: flex;width:80%;align-items: center;">
							<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;"></image>
							<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">{{item.text}}
							</view>
						</view>
						<view style="width: 20%;display: flex;justify-content: flex-end;">
							<radio-group name="openWay" style="margin-left: 20upx;" @tap='selectWay(item.id)'>
								<label class="tui-radio">
									<radio color="#1789FD" :checked="openWay === item.id ? true : false" />
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<view
					style="width: 690rpx;height: 80rpx;background:#1789FD;color:#FFFFFF;text-align: center;line-height: 80rpx;border-radius: 50rpx;margin: 30rpx;"
					@click="pay()">确认支付</view>
			</view>

		</view>



		<u-popup v-model="isFilter" mode="bottom" border-radius="14" height="1000rpx" :closeable="false">
			<view
				style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;padding-top:15rpx;padding-bottom:40rpx;">
				订单商品列表
			</view>
			<!-- <view class="">
				<scroll-view class="nav" scroll-y scroll-with-animation style="height:calc(1000rpx - 102rpx)">

				</scroll-view>
				
			</view> -->
			<view
				style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;padding-top:15rpx;padding-bottom:40rpx;"
				v-for="(item,index) in orderLists" :key="index">
				{{item.skuName}}
			</view>


			<view class="">
				<view
					style="width: 690rpx;height: 80rpx;background:#1789FD;color:#FFFFFF;text-align: center;line-height: 80rpx;border-radius: 50rpx;margin: 30rpx;"
					@click="pay()">确认支付</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '@/components/empty.vue'

	export default {
		components: {
			meTabs,
			empty
		},
		data() {
			return {
				goods: [], // 数据列表
				game: [],
				tabs: [{
					title: '全部',
					status: ''
				}, {
					title: '待付款',
					status: '0'
				}, {
					title: '待发货',
					status: '1'
				}, {
					title: '已发货',
					status: '2'
				}, {
					title: '已完成',
					status: '3'
				}, {
					title: '已取消',
					status: '4'
				}, {
					title: '无效订单',
					status: '5'
				}],
				tabIndex: 0, // tab下标

				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				reverTrue: false,
				code: '',
				count: '',
				orderSn: '',
				isPay: true,
				showPay: false,
				openLists: [],
				openWay: 1,
				isFilter: false,
				orderLists: [],
			}
		},
		onLoad(e) {
			this.nickName = uni.getStorageSync('nickName');
			// #ifdef APP-PLUS
			this.openLists = [{
				image: '../../static/images/zhifubao.png',
				text: '支付宝',
				id: 1
			}, {
				image: '../../static/images/icon_weixin.png',
				text: '微信',
				id: 2
			}, {
				image: '../../static/images/lingqian.png',
				text: '零钱',
				id: 3
			}];
			this.openWay = 1;
			// #endif

			// #ifdef MP-WEIXIN
			this.openLists = [{
				image: '../../static/images/icon_weixin.png',
				text: '微信',
				id: 2
			}, {
				image: '../../static/images/lingqian.png',
				text: '零钱',
				id: 3
			}];
			this.openWay = 2;
			// #endif

			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				this.openLists = [{
					image: '../../static/images/zhifubao.png',
					text: '支付宝',
					id: 1
				}, {
					image: '../../static/images/lingqian.png',
					text: '零钱',
					id: 3
				}, {
					image: '../../static/images/icon_weixin.png',
					text: '微信',
					id: 2
				}];
				this.openWay = 1;
			} else {
				this.openLists = [{
					image: '../../static/images/zhifubao.png',
					text: '支付宝',
					id: 1
				}, {
					image: '../../static/images/lingqian.png',
					text: '零钱',
					id: 3
				}];
				this.openWay = 1;
			}
			// #endif
		},
		onHide() {
			getApp().globalData.tabIndex = ''
		},
		onShow() {
			this.userId = uni.getStorageSync('userId')
			if (this.userId) {
				console.log(getApp().globalData.tabIndex, 'zzzzzzzzzzzzzz')
				uni.showLoading({
					title: '加载中',
				})
				if (getApp().globalData.tabIndex) {
					this.tabIndex = getApp().globalData.tabIndex
					this.getlist()
				} else {
					this.tabIndex = 0
					this.getlist()
				}

			}

		},
		methods: {
			getOrder(id) {
				let data = {
					id: id,

				}
				this.$Request.get('/app/orders/queryOrders', data).then(res => {
					if (res.code == 0) {
						let item = res.data
						// uni.navigateTo({
						// 	url: '/my/order/complain?id=' + item.ordersId + '&byUserId=' + item
						// 		.orderTakingUserId + '&userName=' + item.user.userName + '&title=' + item
						// 		.orderTaking.myLevel + '&ordersNo=' + item.ordersNo
						// })
						let title = item.appointInformation.serviceName + item.appointInformation.hospitalName +
							'订单'
						// console.log(title)
						// return
						uni.navigateTo({
							url: '/my/order/complain?id=' + item.ordersId + '&byUserId=' + item
								.orderTakingUserId + '&title=' + title + '&ordersNo=' + item.ordersNo
						})
					}
				})
			},

			//去支付
			goPayment(item) {
				console.log(item);
				return
				uni.navigateTo({
					url: '/shopping/shoppOrder/orderDetail?submitOrderForm=' + encodeURIComponent(JSON
						.stringify(item))
				})

			},




			bindclose() {
				this.reverTrue = false
			},
			look(e) {
				this.reverTrue = true
				this.code = e.code
			},
			getlist() {
				let curTab = this.tabs[this.tabIndex].status

				let data = {
					status: curTab,
					page: this.page,
					limit: this.limit,
					memberId: uni.getStorageSync('vipId')
				}
				this.$Request.get('/app/order/userMallOrderList', data).then(res => {
					console.log(res);
					if (res.code == 0) {
						uni.hideLoading()
						this.count = res.data.totalCount
						if (this.page == 1) {
							this.goods = []
						}
						res.data.list.forEach(d => {
							// if (d.gameName) {
							// 	d.gameName = d.gameName.split(',')
							// }
							if (d.state == 0) {
								d.statusName = '待付款'
							} else if (d.state == 1) {
								d.statusName = '进行中'
							} else if (d.state == 2) {
								d.statusName = '已完成'
							} else if (d.state == 3) {
								d.statusName = '已取消'
							} else if (d.state == 4) {
								d.statusName = '待接单'
							} else if (d.state == 5) {
								d.statusName = '待服务'
							}
							this.goods.push(d);
						});
					}
				}).catch((res) => {
					//联网失败, 结束加载
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				});
			},
			// 切换菜单
			tabChange() {
				this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				uni.showLoading({
					title: '加载中',
				})
				this.getlist()
			},
			// 取消订单
			cancelOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认取消订单吗?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: e.ordersId,
								status: '3'
							}
							that.$Request.get('/app/orders/cancelOrder', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '订单已取消'
									})
									that.page = 1
									that.getlist()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 完成订单
			cancel(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '订单完成后款项将支付给服务方，确认完成订单吗?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: e.ordersId,
								status: '2'
							}
							that.$Request.get('/app/orders/cancelOrder', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '订单已完成'
									})
									that.page = 1
									that.getlist()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//删除
			delOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除订单吗?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: e.ordersId,
							}
							that.$Request.get('/app/orders/deleteOrder', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: "删除成功"
									})
									that.page = 1
									that.getlist()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goNav(url) {
				uni.navigateTo({
					url
				})
			},

			// 支付订单
			pay() {
				if (this.isPay == false) {
					return
				}
				let that = this
				that.showPay = false;
				uni.showModal({
					title: '付款提示',
					content: '确认支付吗?',
					success: function(re) {
						if (re.confirm) {
							that.isPay = true
							//classify  1app  2公众号 3小程序
							let classify = 1;
							if (that.openWay == 2) { //微信
								// #ifdef MP-WEIXIN
								that.$Request.post("/app/mallOrderPay/wxCombinedOrderPay", {
									orderSn: that.orderSn,
									// orderSn: '20251104152222722226',
								}).then(red => {

									if (red.code == 0) {
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: red.data.timeStamp,
											nonceStr: red.data.nonceStr,
											package: red.data.package,
											signType: red.data.signType,
											paySign: red.data.paySign,
											success: function(redd) {
												uni.removeStorageSync('EditAddress')
												uni.showLoading({
													title: '支付成功'
												});
												that.isPay = true
												uni.hideLoading();
												setTimeout(function() {
													// uni.navigateBack();
													//支付完成跳转到购物车
													uni.navigateTo({
														url: '/shopping/shoppMyCard/index'
													})
												}, 1000)
											},
											fail: function(err) {
												that.isPay = true
												uni.hideLoading();
												that.$queue.showToast(
													'支付失败');
											}
										});
									} else {
										that.isPay = true
										uni.showToast({
											title: red.msg,
											icon: 'none'
										})
									}
								});
								// #endif

								// #ifdef H5
								let ua = navigator.userAgent.toLowerCase();
								console.log(ua)
								if (ua.indexOf('micromessenger') !== -1) {
									that.$Request.post("/app/wxPay/wxPayOrder", {
										orderId: that.order.ordersId,
										classify: 4
									}).then(red => {
										if (red.code == 0) {
											that.callPay(red.data);
										} else {
											that.isPay = true
											uni.showToast({
												title: red.msg,
												icon: 'none'
											})
										}
									});
								}

								// #endif

								// #ifdef APP-PLUS
								that.$Request.post("/app/wxPay/wxPayOrder", {
									orderId: that.order.ordersId,
									classify: 1
								}).then(red => {
									if (red.code == 0) {
										console.log(red, '+++++++++++++++++++++')
										that.setPayment('wxpay', JSON.stringify(red.data));
									} else {
										that.isPay = true
										uni.showToast({
											title: red.msg,
											icon: 'none'
										})
									}
								});
								// #endif

							} else if (that.openWay == 1) { //支付宝
								// #ifdef H5
								that.$Request.post("/app/aliPay/payOrder", {
									orderId: that.order.ordersId,
									classify: 2
								}).then(red => {
									if (red.code == 0) {
										const div = document.createElement('div')
										div.innerHTML = red.data //此处form就是后台返回接收到的数据
										document.body.appendChild(div)
										document.forms[0].submit()
										that.isPay = true
									} else {
										that.isPay = true
										uni.showToast({
											title: red.msg,
											icon: 'none'
										})
									}
								});
								// #endif
								// #ifdef APP-PLUS
								that.$Request.post("/app/aliPay/payOrder", {
									orderId: that.order.ordersId,
									classify: 1
								}).then(red => {
									if (red.code == 0) {
										that.setPayment('alipay', red.data);
									} else {
										that.isPay = true
										uni.showToast({
											title: red.msg,
											icon: 'none'
										})
									}
								});
								// #endif
							} else if (that.openWay == 3) { //零钱
								that.$Request.post("/app/orders/payMoney", {
									ordersId: that.order.ordersId,
								}).then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '支付成功'
										})
										that.isPay = true
										setTimeout(function() {
											uni.navigateBack();
										}, 1000)
									} else {
										that.isPay = true
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									}
								});
							}

						} else if (re.cancel) {
							that.isPay = true
							console.log('用户点击取消');
						}
					}

				})

			},


		},
		onReachBottom: function() {
			if (this.count == this.goods.length) {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			} else {
				this.page = this.page + 1;
				this.getlist()
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist()
		},
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.head {
		/* #ifdef APP */
		padding-top: 100upx;
		/* #endif */

	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.btn {
		color: #0175FE;
		background: #D9EBFF;
		padding: 15upx 30upx;
		border-radius: 50upx;
		margin-left: 20upx;
		font-size: 24upx;
	}

	.boxtk {
		width: 100%;
		height: 162vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

	}

	.whiteboxs {
		// width: 461upx;
		// height: 563upx;
		text-align: -webkit-center;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 185px;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.whitebox {
		width: 550upx;
		height: 350upx;
		background: #FFFFFF;
		border-radius: 32upx;
		margin: 0 auto;
		position: fixed;
		top: 450upx;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.box {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
	}

	.bottbox {
		position: fixed;
		bottom: 0upx;
		left: 0;
		right: 0;
		z-index: 9999;
		background: #ffffff;
	}

	.order_status {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0 0 0 10rpx;
	}
</style>